<template>
    <view class="pagebox">
        <uni-card class="">
            <view class="address justify-between align-center" @click="toselorder()">
                <view class="Left">
                    <template v-if="!orderinfo">
                        <view class="onkey">
                            <uni-icons type="info" color="#f3a73f" size="20"></uni-icons> <text>请选择采购的订单</text>
                        </view>
                    </template>
                    <template v-else>
                        <view class="onkey"> <uni-icons type="home" color="#007aff" size="16"></uni-icons> <text class="bold">{{orderinfo.client_name}},{{orderinfo.project_name}}</text> </view>
                        <view class="onkey"> <uni-icons type="phone" color="#007aff" size="16"></uni-icons> <text>{{orderinfo.username}},{{orderinfo.phone}}</text> </view>
                        <view class="onkey"> <uni-icons type="location" color="#007aff" size="16"></uni-icons> <text class="dz">{{orderinfo.address}}</text> </view>
                    </template>
                    
                </view>
                <view class="right">
                    <uni-icons type="right" size="24"></uni-icons>
                </view>   
            </view>
             
        </uni-card>
        <uni-card>
            <button type="default" size="mini" @click="showpopup('popup')">添加</button>
            <uni-table border stripe emptyText="暂无更多数据" >
                <uni-tr>
                    <uni-th align="center" width="50"> </uni-th>
                    <uni-th align="center">名称</uni-th>
                    <uni-th align="center" width="50">数量</uni-th>
                    <uni-th align="center">链接</uni-th>
                </uni-tr>
                <template v-for="(item,index) in lists">
                    <uni-tr>
                        <uni-th align="center" width="50">
                            <view class="red" @click="delbuy(index)">删除</view>
                        </uni-th>
                        <uni-th align="center">{{item.goods_name}}</uni-th>
                        <uni-th align="center" width="50">{{item.goods_num}}</uni-th>
                        <uni-th align="center">{{item.goods_url}}</uni-th>
                    </uni-tr>
                </template>
            </uni-table>
            
            <view class="btns">
                <button class="btn" type="primary" size="mini" @click="submit()">提交保存</button>
            </view>
        </uni-card>
        <uni-popup ref="popup" type="bottom">
            <uni-card>
                
                <uni-forms :modelValue="buyItem" ref="popupForm" :rules="rules" label-width="80px">
                    <uni-forms-item label="数据类型" required name="type"> 
                        <uni-data-checkbox v-model="buyItem.type" :localdata="datatype" />
                    </uni-forms-item>
                    <template v-if="buyItem.type == 1 || buyItem.goods_name" >
                        <uni-forms-item label="采购名称" required name="goods_name">
                            <uni-easyinput style="width: 450rpx;" v-model="buyItem.goods_name" placeholder="采购名称" />
                        </uni-forms-item>
                        <uni-forms-item label="采购数量" required name="goods_num">
                            <uni-easyinput style="width: 450rpx;" type="number" v-model="buyItem.goods_num" placeholder="采购数量" />
                        </uni-forms-item>
                        <uni-forms-item label="采购链接" name="goods_url">
                            <uni-easyinput style="width: 450rpx;" v-model="buyItem.goods_url" placeholder="采购链接" />
                        </uni-forms-item>
                        
                    </template>
                
                </uni-forms>
                <template v-if="buyItem.type == 2">
                    <uni-forms label-width="80px">
                        <uni-forms-item label="选择商品">
                            <view style="display: flex;align-items: center;height: 100%;">
                                <picker mode = "selector" :range="buygoodslist" range-key="label" @change="selbuytype">
                                    <view style="display: flex;align-items: center;">
                                        <text class="client_name">{{buyItem.goods_name || '请选择'}}</text>    &nbsp;&nbsp;&nbsp;&nbsp;<uni-icons type="bottom" size="18"></uni-icons>
                                    </view>
                                </picker>
                            </view>
                    
                        </uni-forms-item>
                    </uni-forms>
                </template>
                <view class="btns">
                    <button type="primary" size="mini" @click="addbuy('popupForm')">添加</button>
                </view>
            </uni-card>
        </uni-popup>
        
    </view>
</template>

<script>
var def_buy = {
    index:0,
    id:0,
    type:1,
    goods_name:'',
    goods_num:1,
    goods_url:'',
    price:0
}   
export default{
    data(){
        return{
           buyItem:new Object(def_buy),
           rules:{
               goods_name:{
                  rules:[{
                    required: true,
                    errorMessage: '采购名称不能为空',
                  }] 
               },
               goods_num:{
                   rules:[{
                     required: true,
                     errorMessage: '请设置采购数量',
                   }] 
               }
           },
           oid:'',
           orderinfo:null,
           lists:[],
           buygoodslist:[],
           datatype: [{
               text: '手动输入',
               value: 1
           }, {
               text: '选择商品',
               value: 2
           }],
           type:1
        }
    },
    onLoad(option){
        if(option.type =="produce_buy"){
            this.type = 2
        }
    },
    onShow(){
        this.getbuylist()
        var _this = this
        uni.$on('orderinfo',function(data){
            console.log('监听到事件来自返回的参数：' , data);
            // TODO 下面执行刷新的方法
            _this.orderinfo = data
        })

    },
    methods:{
        submit(){
            this.$api.post(`buy/submit`,{
                oid:this.orderinfo.oid,
                lists:this.lists,
                type:this.type
            }).then((res)=>{
                this.$success('保存成功')
                uni.navigateBack({data:1})
            })
        },
        toselorder(){
            uni.navigateTo({
                url:'/pages/yuangong/selorderlist?issel=1&status=-1'
            })
        },
        getbuylist(){
            this.$api.get(`buy/buygoodslist`).then(({data})=>{
                this.buygoodslist = data
            })
        },
        getbuygoods(){
            
        },
        selbuytype(e){
            this.buyItem.goods_name = this.buygoodslist[e.detail.value].label
            this.buyItem.goods_url = this.buygoodslist[e.detail.value].url
            this.buyItem.price = this.buygoodslist[e.detail.value].price
            console.log("e",this.buyItem)
        },
        
        addbuy(ref){
            this.$refs[ref].validate().then(res => {
               if(!this.buyItem.goods_name){
                   this.$error("请输入商品名称")
                   return;
               } 
               if(!this.buyItem.goods_num){
                   this.$error("请输入采购数量")
                   return;
               } 
               this.lists.push(JSON.parse(JSON.stringify(this.buyItem)))
               console.log(this.lists)
               this.$forceUpdate()
               this.$refs.popup.close()
            }).catch(err => {
                console.log('err', err);
            })
        },
        showpopup(ref){
            this.buyItem = JSON.parse(JSON.stringify(def_buy))
            this.$refs[ref].open('center')
        },
  
        delbuy(ind){
            this.lists.splice(ind,1)
        },
    }
}    
</script>

<style lang="less" scoped>
    .btns{
        display: flex;
        justify-content: center;
        .btn{
            width: 90%;
            margin: 0 auto;
            margin-top: 20rpx;
        }
    }
    page{
        background-color: #fff;
    }
    .pagebox{
        .address{
            .Left{
                .onkey{
                    display: flex;
                    align-items: center;
                    color: #333;
                    text{
                        margin-left: 10rpx;
                    }
                    .dz{
                        font-size: 24rpx;
                        color: #8f939c;
                    }
                }
            }
        }    
    }
</style>